<template>
  <div>
    <el-tabs type="border-card">
          <el-table border v-loading="loading" style="width: 100%" :data="infoList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="支付金额" width="100" align="center" prop="instalmentPice" />
            <el-table-column label="用户手机号" width="100" align="center" prop="loginName" />
            <el-table-column label="施工队名称" width="100" align="center" prop="constructionName" />
            <el-table-column label="店铺名称" width="100" align="center" prop="shopsName" />
            <el-table-column label="第一次支付金额" width="100" align="center" prop="firstPayment" />
            <el-table-column label="第二次支付金额" width="100" align="center" prop="lastPayment" />
            <el-table-column label="第一次拨款" width="100" align="center" prop="oneMoney" />
            <el-table-column label="第二次拨款" width="100" align="center" prop="twoMoney" />
            <el-table-column label="第三次拨款" width="100" align="center" prop="threeMoney" />
            <el-table-column label="第四次拨款" width="100" align="center" prop="fiveMoney" />
            <el-table-column label="第五次拨款" width="100" align="center" prop="fourMoney" />
            <el-table-column label="第一期上传凭证" width="200" align="center" >
              <template slot-scope="scope" >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.firstList"
                  :preview-src-list="[scope.row.firstList]"
                >
                </el-image>
              </template>
            </el-table-column>

            <el-table-column label="第二期上传凭证" width="200" align="center" >
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.lastList"
                  :preview-src-list="[scope.row.lastList]">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="最后审核时间" width="150" align="center" prop="modifiedTime" >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
    </el-tabs>


  </div>
</template>

<script>

import {payableInstalmentList , selectPayableInstalment} from "@/api/super/checkVoucher";

export default {
  name: "checkVoucher",
  components:{
    voucherTow:()=> import('@/views/super/checkVoucher/voucherTow.vue'),
    endAudit:()=> import('@/views/super/checkVoucher/endAudit.vue')
  },
  data() {
    return {
      valuesu: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      showSearch: true,
      // 总条数
      total: 0,
      // 施工队分期支付信息列表
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openTwo:false,
      openOne:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        instalmentId: null,   //施工队分期支付id
        constructionId: null, //施工队ID
        customerId: null,     //用户ID
        firstList: null,      //第一期上传凭证
        lastList: null,       //第二期上传凭证
        instalmentPice: null, //价格
        zhuangtai: null,      //支付状态
        voucherStatus: null,  //凭证审核状态
        modifiedTime: null,   //最后修改时间
      },
      disabled: false,
      active: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {

    /** 查询施工队分期支付列表 */
    getList() {
      this.loading = true;
      selectPayableInstalment(this.queryParams).then(res => {
        this.infoList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
  }
}
</script>

<style scoped>

</style>
